{include file="public/head"/}

<div id="main">
<!--search框开始-->
<div class="row clearfix" id="search-box" style="display:none;margin-top:0">
    <div class="col-md-12 text-right">
        <div>
            <div class="form-inline" role="form" v-cloak>
                <input type="hidden" id="khmsg" value="{:lang('please_check_the_customers_to_be_adjusted')}">
                <select class="form-control" @change="changecoun" v-model="countryval">
                    <option value="" selected>&nbsp;&nbsp;{:lang('country')}</option>
                    <option :value="item.id" v-for="(item,index) in country">{{item.name}}</option>
                </select>

                <select class="form-control" @change="changepro" v-model="provincesval">
                    <option selected value="0">&nbsp;&nbsp;{:lang('state')}</option>
                    <option :value="item.id" v-for="(item,index) in provinces">{{item.name}}</option>
                </select>

                <select class="form-control" @change="changetype" v-model="cotypeval">
                    <option value="0">{:lang('company_type')}</option>
                    <option :value="item.id" v-for="(item,index) in cotype">{{item.content}}</option>
                </select>


                <div class="form-group">
                    <label for="name">{:lang('search_content')}</label>
                    <input type="text" class="form-control" v-model="dname" placeholder="{:lang('please_enter_the_company_name,_address,_zip_code')}">
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-default btn-primary" @click="getAllList"><span
                            class="glyphicon glyphicon-search"></span>{:lang('search')}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--search框结束-->

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>
    <div class="ntDesktop">
        <div class="ntDesktop-head">{:lang('customer_list')}</div>
        <div class="row clearfix" style="padding-top:0px">
            <div class="col-md-6 column">
                <ul class="nav nav-tabs">
                    <li>
                        <a href="#home" data-toggle="tab" id="tab-all" @click.prevent="statuschange('')">{:lang('all')}</a>
                    </li>
                    <li class="active">
                        <a href="#home" data-toggle="tab" id="tab-normal"
                           @click.prevent="statuschange('normal')">{:lang('normal')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" id="tab-lock" @click.prevent="statuschange('lock')">{:lang('locking')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" id="tab-del" @click.prevent="statuschange('del')">{:lang('delete')}</a>
                    </li>
                </ul>
            </div>

            <div class="col-md-6 column text-right">
                <div>
                    <a href="{:url('companyadd')}" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>{:lang('add_new_customer')}</a>
                    <span style="padding:10px">&nbsp;</span>
                    <button type="button" class="btn btn-default option-edit" @click="Adjust"><span
                            class="glyphicon glyphicon-pencil"></span>{:lang('batch_adjustment')}
                    </button>
                    <button type="button" class="btn btn-default option-lock"
                            @click="batchFun('/admin/customer/companylock','lock')" v-if="status=='normal' || status==''"><span
                            class="glyphicon glyphicon-lock"></span>{:lang('batch_locking')}
                    </button>
                    <button type="button" class="btn btn-default option-unlock"
                            @click="batchFun('/admin/customer/companyunlock','unlock')" v-if="status=='lock'|| status==''"><span
                            class="glyphicon glyphicon-leaf"></span>{:lang('batch_unlock')}
                    </button>
                    <button type="button" class="btn btn-default option-del"
                            @click="batchFun('/admin/customer/companydel','del')" v-if="status=='normal'|| status==''"><span
                            class="glyphicon glyphicon-trash"></span>{:lang('batch_delete')}
                    </button>
                    <button type="button" class="btn btn-default option-recover"
                            @click="batchFun('/admin/customer/companyrecover','recover')" v-if="status=='del'|| status==''"><span
                            class="glyphicon glyphicon-heart"></span>{:lang('batch_recovery')}
                    </button>
                    <button type="button" class="btn btn-danger option-clear"
                            @click="batchFun('/admin/customer/companyclear','clear')"v-if="status=='del'"><span
                            class="glyphicon glyphicon-fire"></span> {:lang('batch_clear')}
                    </button>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                    <tr>
                        <th style="text-align:center"><input type="checkbox" @click="allsel"/></th>
                        <th> {:lang('company_type/company_name')}</th>
                        <th> {:lang('address')}</th>
                        <th> {:lang('operate')}</th>
                        <th> {:lang('employees')}</th>
                        <th> {:lang('status')}</th>
                        <th> {:lang('activity')}</th>
                        <th class="sorting" @click="sortfun"  data-order="1"> {:lang('edit')}</th>
                        <th> {:lang('operate')}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id+status" v-if="list.length>0">
                        <td align='center'><input type="checkbox" @click="onesel(item.id)"/></td>
                        <td>
                            <small>{{item.cotypename}}</small>
                            <br/><a href="detail.html">{{item.name}}</a></td>
                        <td>
                            <small>{{item.address}}</small>
                            <br/> {{item.addr}}
                        </td>
                        <td align='center'> {{item.works}}</td>
                        <td align='center'> {{item.managename}}</td>
                        <td align='center'> {{item.status}}</td>
                        <td align="center">
                            <small>{{item.active_timeone}}<br/> {{item.active_timetwo}}</small>
                        </td>
                        <td> {{item.managename}} <br/>
                            <small>{{item.update_date}}</small>
                        </td>
                        <td class="text-right">
                            <div>
                                <a :href="'/admin/customer/companycheck?company_id='+item.id+'&tab=detail'" class="btn btn-sm btn-primary"><span
                                        class="glyphicon glyphicon-sunglasses"></span>{:lang('view')}</a>
                                <a :href="'/admin/customer/companyedit?company_id='+item.id" class="btn btn-sm btn-primary option-edit"><span
                                        class="glyphicon glyphicon-pencil"></span> {:lang('edit')}</a>
                                <div class="btn-sm btn-group">
                                    <button type="button" class="btn btn-sm btn-primary dropdown-toggle"
                                            data-toggle="dropdown">
                                        {:lang('more_actions')}
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li class="option-more"><a :href="'/admin/customer/companycheck?company_id='+item.id+'&tab=link'" v-if="item.status!='DEL'"><span
                                                class="glyphicon glyphicon-user"></span>{:lang('contact')}</a></li>
                                        <li class="option-more" v-if="item.status!='DEL'"><a :href="'/admin/customer/companycheck?company_id='+item.id+'&tab=bank'"  ><span
                                                class="glyphicon glyphicon-piggy-bank"></span>{:lang('bank')}</a></li>
                                        <li class="option-lock"  v-if="item.status=='NORMAL'"><a href="#" @click="batchFun('/admin/customer/companylock','lock',item.id)"><span
                                                class="glyphicon glyphicon-lock"></span>{:lang('locking')}</a></li>

                                        <li class="option-unlock" v-if="item.status=='LOCK'|| item.status=='DRAFT'"><a href="#" @click="batchFun('/admin/customer/companyunlock','unlock',item.id)"><span
                                                class="glyphicon glyphicon-leaf"></span>{:lang('unlock')}</a></li>

                                        <li class="option-del" v-if="item.status!='LOCK' && item.status!='DEL'"><a href="#" @click="batchFun('/admin/customer/companydel','del',item.id)"><span
                                                class="glyphicon glyphicon-trash"></span>{:lang('delete')}</a></li>

                                        <li class="option-recover"  v-if="item.status=='DEL' "><a href="#" @click="batchFun('/admin/customer/companyrecover','recover',item.id)"><span
                                                class="glyphicon glyphicon-heart"></span>{:lang('recovery')}</a></li>

                                        <li class="option-clear"  v-if="item.status=='DEL'"><a href="#" @click="batchFun('/admin/customer/companyclear','clear',item.id)"><span
                                                class="glyphicon glyphicon-fire" ></span>{:lang('clear')}</a></li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr style="text-align: center;" v-if="list.length==0">
                            <td colspan="9">{:lang('no_data')}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="pagination" id="pagination">
                </ul>
            </div>
        </div>
    </div>
</div>
</div>
{include file="public/foot"/}
<script>
    var table = new Vue({
        el: '#main',
        data: {
            list: [],
            page: 1,
            status: 'normal',
            dname: '',
            allid: [],//当前页ids
            batch: [],
            pageSize: 2,
            country:[],
            provinces:[],//省份
            cotype:[],//公司分类
            countryval:'',
            provincesval:0,
            cotypeval:0

        },
        methods: {
            setPage(pageCurrent, pageSum) {
            //数据总条数
            var myPageCount = pageSum;
            //一页显示多少条
            var myPageSize = this.pageSize;
            //总页数
            var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
            $.jqPaginator('#pagination', {
                totalPages: parseInt(countindex),
                //最多显示多少页
                visiblePages: 5,
                //默认显示第几页
                currentPage: pageCurrent,
                first: '<li class="first"><a href="javascript:;">'+langcon.page_home+'</a></li>',
                prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>'+langcon.previous_page+'</a></li>',
                next: '<li class="next"><a href="javascript:;">'+langcon.next_page+'<i class="arrow arrow3"></i></a></li>',
                last: '<li class="last"><a href="javascript:;">'+langcon.last_page+'</a></li>',
                page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                all:'<li class="page"><a href="javascript:;">'+parseInt(countindex)+' / '+this.page+'PG , '+this.pageSize+' /PG</a></li>',
                onPageChange:(num, type)=>{
                    if (type == "change") {
                        this.page=num
                        this.getAllList()
                    }
                }
            });
        },
            //数据所有获取
            getAllList(){
                this.batch=[]
                $('th input').prop('checked', false)
                $.ajax({
                    url: "/admin/customer/customercompany",
                    type: 'post',
                    data: {
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                        status: this.status,
                        dname: this.dname,
                        type_id:this.cotypeval,
                        country_id:this.countryval,
                        provinces_id:this.provincesval
                    },
                    dataType: "json",
                    success: (result) => {
                        this.list = result.getcompany;
                        this.allid = result.dataids;
                        this.country = result.country;
                        this.provinces = result.provinces;
                        this.cotype = result.cotype;
                        // 将数据渲染到页面
                            if(result.size / this.pageSize>1){
                                $('#pagination').show()
                                this.setPage(this.page,result.size)
                            }else{
                                $('#pagination').hide()
                            }
                    }
                })
            },
            //对数据的操作
            batchFun(requrl, reqact, did){
                var data = {
                    act: reqact,
                    id: this.batch.join(',')
                }
                if (did) {
                    data.id = did
                } else {
                    data.id = this.batch.join(',')
                }
                $.ajax({
                    url: requrl,
                    data,
                    type: 'post',
                    success: (data) => {
                        data = JSON.parse(data)
                        change_mes_type('.alert',data.status)
                        if (data.status != 1) {
                            $('.alert').show()
                            $('.alert p').html('*'+data.msg+'<br>')
                            return false;
                        } else {
                            $('.alert').show()
                            $('.alert p').html('*'+data.msg+'<br>')
                            if(this.page > Math.ceil(this.list.length-1 / this.pageSize)){
                                if(this.page>1){
                                    this.page--
                                }
                            }
                            this.getAllList()
                        }

                    }
                })
            },
            statuschange(status){
                this.status = status;
                this.page = 1;
                this.getAllList()
            },
            delcompany(id){
                $.ajax({
                    url: '/admin/customer/companydelete?id=' + id,
                    type: 'post',
                    dataType: 'json',
                    success:(res)=>{
                        change_mes_type('.alert',res.status)
                        if (res.status != 1) {
                            $('.alert p').html('*'+res.msg+'<br>')
                            return false;
                        } else {
                            $('.alert p').html('*'+res.msg+'<br>')
                            this.getAllList()
                            if (!(this.list.length - 1)) {
                                if(this.page>1){
                                    this.page--
                                }
                            }
                            this.getAllList()
                        }
                    }
                });
            },
            allsel(event){
                if ($(event.target).prop('checked')) {
                    $(event.target).parents('table').find('input').prop('checked', true)
                    this.batch = this.allid
                } else {
                    $(event.target).parents('table').find('input').prop('checked', false)
                    this.batch = []
                }
            },
            onesel(did){
                if (this.batch.indexOf(did) == -1) {
                    this.batch.push(did)
                } else {
                    this.batch.splice(this.batch.indexOf(did), 1)
                }
                var isall = true
                $('td input').each(function () {
                    if (!$(this).prop('checked')) {
                        isall = false
                    }
                })
                $('th input').prop('checked', isall)
            },
            changecoun(){
                $.ajax({
                    url:'/admin/api/getpro',
                    data:{
                        pro_id:this.countryval,
                        table:'provinces'
                    },
                    type:'post',
                    success:(data)=>{
                        data=JSON.parse(data)
                        this.provinces=data
                    }
                })
            },
            changepro(){
                
            },
            changetype(){

            },
            sortoneData(a, b){
                if ( $(event.target).attr('data-order') == 1) {
                    $(event.target).attr('data-order', 2)
                    return b.update_at - a.update_at
                } else {
                    $(event.target).attr('data-order', 1)
                    return a.update_at - b.update_at
                }
            },
            sortfun($event){
                    this.list.sort(this.sortoneData);
            },
            Adjust(){
                if(this.batch.length){
                    window.localStorage.setItem('batch',this.batch.join(','))
                    location.href="/admin/customer/batchcompany"
                }else{
                    change_mes_type('.alert',2)
                    $('.alert').show()
                    $('.alert p').html('*'+$('#khmsg').val()+'<br>')
                }
            }
        },
        created(){
            this.getAllList()
        }
    })
</script>
